<template>
    <Layout>
        <div class="volunteer-elegance">
            <!-- 面包屑导航 -->
            <div class="breadcrumb">
                当前位置：<router-link to="/home" class="breadcrumb-link">首页</router-link> > <span class="breadcrumb-current">志愿风采</span>
            </div>
            <div class="elegance-list" v-infinite-scroll="loadMore" infinite-scroll-distance="10">
                <el-row :gutter="20">
                    <el-col :span="8" v-for="(item, index) in displayedElegances" :key="item.id">
                        <el-card class="elegance-card" shadow="hover" @click="goToDetail(item.id)">
                            <div class="elegance-content">
                                <div class="elegance-header">
                                    <h3 class="elegance-title">{{ item.title }}</h3>
                                    <el-tag v-if="item.isPinned" type="danger" size="small">置顶</el-tag>
                                </div>
                                <div class="elegance-image">
                                    <el-image 
                                        :src="item.imageUrl || '/default-elegance.jpg'" 
                                        fit="cover">
                                    </el-image>
                                </div>
                                <p class="elegance-text">{{ item.content }}</p>
                                <div class="elegance-footer">
                                    <div class="elegance-info">
                                        <el-icon><Calendar /></el-icon>
                                        <span>{{ formatDate(item.publishTime) }}</span>
                                    </div>
                                    <div class="elegance-author">
                                        <el-icon><User /></el-icon>
                                        <span>{{ item.author }}</span>
                                    </div>
                                    <div class="elegance-views">
                                        <el-icon><View /></el-icon>
                                        <span>{{ item.views }}</span>
                                    </div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
                <div v-if="loading" class="loading">
                    <el-loading text="加载中..." />
                </div>
                <div v-if="noMore" class="no-more">
                    没有更多数据了
                </div>
            </div>
        </div>
    </Layout>   
</template>

<script setup>
import Layout from '@/components/Layout.vue'
import { Calendar, User, View } from '@element-plus/icons-vue'
import { ref, computed, onMounted } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'

const router = useRouter()
const pageSize = 9
const currentPage = ref(1)
const loading = ref(false)
const noMore = ref(false)
const elegances = ref([])

const fetchElegances = async () => {
    try {
        const response = await axios.get('http://localhost:9090/api/volunteerview/all')
        elegances.value = response.data.sort((a, b) => {
            if (a.isPinned && !b.isPinned) return -1
            if (!a.isPinned && b.isPinned) return 1
            return new Date(b.publishTime) - new Date(a.publishTime)
        })
    } catch (error) {
        console.error('获取志愿风采列表失败:', error)
    }
}

onMounted(() => {
    fetchElegances()
})

const displayedElegances = computed(() => {
    return elegances.value.slice(0, currentPage.value * pageSize)
})

const formatDate = (dateString) => {
    const date = new Date(dateString)
    return date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
    })
}

const loadMore = async () => {
    if (loading.value || noMore.value) return
    
    loading.value = true
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    if (currentPage.value * pageSize >= elegances.value.length) {
        noMore.value = true
    } else {
        currentPage.value++
    }
    loading.value = false
}

const goToDetail = (id) => {
    router.push(`/volunteerview/${id}`)
}
</script>

<style scoped>
.volunteer-elegance {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.breadcrumb {
    margin-bottom: 20px;
    color: #666;
    font-size: 14px;
}

.breadcrumb-link {
    color: #dd2b2b;
    text-decoration: none;
}

.breadcrumb-link:hover {
    color: #ff4d4d;
}

.breadcrumb-current {
    color: #dd2b2b;
}

.elegance-list {
    padding: 20px;
}

.elegance-card {
    margin-bottom: 20px;
    transition: transform 0.3s;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
    cursor: pointer;
    height: 450px;
}

.elegance-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.elegance-content {
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.elegance-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.elegance-title {
    margin: 0;
    font-size: 18px;
    color: #303133;
    font-weight: 600;
    flex: 1;
    margin-right: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.elegance-image {
    height: 200px;
    margin-bottom: 15px;
    border-radius: 8px;
    overflow: hidden;
}

.elegance-image .el-image {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    object-fit: cover;
    pointer-events: none;
    transition: transform 0.3s;
}

.elegance-image .el-image:hover {
    transform: scale(1.05);
}

.elegance-text {
    margin: 0 0 15px 0;
    font-size: 14px;
    color: #606266;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    line-height: 1.6;
    flex-grow: 1;
}

.elegance-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #909399;
    font-size: 13px;
    border-top: 1px solid #eee;
    padding-top: 10px;
    margin-top: auto;
}

.elegance-info,
.elegance-author,
.elegance-views {
    display: flex;
    align-items: center;
    gap: 5px;
}

.el-icon {
    margin-right: 5px;
    font-size: 16px;
}

.loading, .no-more {
    text-align: center;
    padding: 20px 0;
    color: #909399;
    font-size: 14px;
}

.el-tag {
    margin-left: 8px;
}
</style>